<template>
  <div class="GdwyyAppBigTitle fill-w flex-center flex-between" :class="['GdwyyAppBigTitle--' + color]">
    <div class="flex-center" @click="$emit('goDetail')">
      <img class="icon" :src="require('../../assets/imgs/reconsitution/' + icon + '.png')" />
      <div class="font-18 bold">{{ title }}</div>
      <div class="font-12 main-blue tips" v-if="tips">{{ tips }}</div>
      <img v-if="showArrow" class="arrow" :src="require('../../assets/imgs/reconsitution/icon_xz.png')" />
    </div>
    <div class="right font-14 color999">
      <span v-if="time">{{ filterTime }}</span>
      <span v-if="customTips">{{ customTips }}</span>
      <span v-if="togoUrl" @click="goUrl"><span class="details">{{ togoUrl }}</span> <van-icon name="arrow" /> </span>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GdwyyAppBigTitle',
  props: {
    title: {
      type: String,
      default: '发展',
    },
    icon: {
      type: String,
      default: '发展',
    },
    time: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: 'blue',
    },
    tips: {
      type: String,
      default: '',
    },
    showArrow: {
      type: Boolean,
      default: false,
    },
    customTips: {
      type: String,
      default: '',
    },
    togoUrl: {
      type: String,
      default: '',
    },
    urls: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },

  computed: {
    filterTime() {
      if (!this.time) return ''
      return this.formatDate(this.time)
    },
  },

  methods: {
    formatDate(date) {
      const year = date.substring(0, 4)
      const month = date.substring(4, 6)
      const day = date.substring(6)
      return `${year}年${month}月${day}日`
    },
    goUrl(){
      this.$router.push({path:this.urls})
    }
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.GdwyyAppBigTitle {
  height: 10.6667vw;
  line-height: 10.6667vw;
  box-sizing: border-box;
  padding: 2.6667vw 4vw 1.3333vw 4vw;
  background-color: #fff;
  .icon {
    width: 5.3333vw;
    height: 5.3333vw;
    margin-right: 1.6vw;
  }
  .tips {
    margin-left: 13px;
  }

  &--blue {
    background-image: linear-gradient(180deg, rgba(194, 220, 255, 0.1) 0%, #ffffff 100%) !important;
  }
  &--red {
    background-image: linear-gradient(179deg, rgba(253, 218, 213, 0.22) 1%, #ffffff 100%) !important;
  }
  &--green {
    background-image: linear-gradient(180deg, rgba(208, 245, 238, 0.18) 0%, #ffffff 100%) !important;
  }
  &--org {
    background-image: linear-gradient(180deg, rgba(255, 221, 184, 0.18) 1%, #ffffff 100%) !important;
  }
  &--puple {
    background-image: linear-gradient(180deg, rgba(203, 194, 255, 0.18) 1%, #ffffff 100%) !important;
  }

  .arrow {
    margin-left: 5px;
    width: 14px;
    height: 14px;
  }
  .right {
    flex-shrink: 0;
  }
  .details{
    font-size: 12px;
    color: #333333;
    letter-spacing: 0.26px;
  }
  .details::after{
    content:'';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 50%;
    position: relative;
    bottom: 2px;
    margin-left: 2px;
  }
}
</style>